<template>
  <div class="user">
    <el-row class="topw">
      <el-col :span="24">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>咨询管理</el-breadcrumb-item>
          <el-breadcrumb-item>添加轮播图片</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row style="padding:10px 0">
      <el-col :span="24">
        <!-- 给组件绑定原生事件的话，需要一个.native的修饰符 -->
        <!-- <el-input placeholder="请输入内容" class="search-input" v-model="title" @keydown.native.enter="initList">
          <el-button slot="append" icon="el-icon-search" @click="initList"></el-button>
        </el-input> -->
        <el-button type="success" plain @click="addDialogFormVisible=true">添加轮播图片</el-button>
      </el-col>
    </el-row>
    <el-table class="margin-20" v-loading="loading" :data="newsList" border style="width: 100%">
      <el-table-column  prop="subscript" width="50">
      </el-table-column>
      <el-table-column label="轮播图图片">
        <template slot-scope="scope">
              <img :src="'https://wisdom-city.oss-cn-hangzhou.aliyuncs.com/'+scope.row.url" width="300" class="head_pic"/>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="createTime" label="创建时间" width="180">
      </el-table-column>
      <el-table-column prop="content" label="新闻内容"  show-overflow-tooltip>    
      </el-table-column> -->
      <el-table-column label="操作" width="125">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" plain icon="el-icon-edit" @click="showEditDialog(scope.row)">
          </el-button>
          <el-button size="mini" type="danger" plain icon="el-icon-delete" @click="showDeleteDialog(scope.row)">
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="1"
        :page-sizes="[10, 20, 30, 40]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <!-- 添加用户对话框 -->
    <el-dialog title="添加轮播图片" :visible.sync="addDialogFormVisible" width="70%">
      <el-form :model="addForm" label-width="120px" :rules="rules" ref="addUserForm">
        <el-form-item label="排序:" prop="subscript" >
          <el-input v-model="addForm.subscript" auto-complete="off" ></el-input>
        </el-form-item>
        <el-form-item label="轮播图片:">
          <el-upload
            class="avatar-uploader"
            action="https://leather.ztazy.cn:3031/sys/file/file" 
            :headers="headers"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUserSubmit('addUserForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑用户对话框 -->
    <el-dialog title="编辑新闻" :visible.sync="editDialogFormVisible" width="70%">
      <el-form :model="editForm" label-width="120px" :rules="rules" ref="editUserForm">
        <el-form-item label="排序:" prop="subscript" >
          <el-input v-model="editForm.subscript" auto-complete="off" ></el-input>
        </el-form-item>
        <el-form-item label="轮播图片:" >
          <el-upload
            class="avatar-uploader"
            action="https://leather.ztazy.cn:3031/sys/file/file" 
            :headers="headers"
            :show-file-list="false"
            :on-success="edithandleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <img v-else :src="'https://wisdom-city.oss-cn-hangzhou.aliyuncs.com/'+editForm.url" class="avatar">
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUserSubmit('editUserForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import VueUeditorWrap from '../../components/vue-ueditor-wrap.vue';
  import {
    slidelist,
    addslide,
    editslide,
    deleteslide,
    PHPURL
  } from '@/api'
  export default {
      components: {
    VueUeditorWrap
  },
    data() {
      return {
          msg: '',
      myConfig: {
        autoHeightEnabled: false,
        initialFrameHeight: 300,
        initialFrameWidth: '100%',
        UEDITOR_HOME_URL: '../../static/UEditor/',
        serverUrl: PHPURL
      },
        imageUrl: '',
        fileList: [],
        newsList: [],
        total: 0,
        picture:"",
        pagesize: 10,
        title:"",
        pagenum: 1,
        addDialogFormVisible: false,
        addForm: {
          url: '',
          subscript:'',
          slideshowId:''
        },
        editDialogFormVisible: false,
        editForm: {
          url: '',
          subscript:'',

        },
        grantDialogFormVisible: false,
        grantForm: {},
        roleList: [],
        roleId: '',
        // 添加用户的表单验证
        rules: {
          username: [{
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }],
          enterpriseName: [{
            required: true,
            message: '请输入企业名称',
            trigger: 'blur'
          }]
        }
      }
    },
    created() {
      this.initList()
    },
    computed: {
      headers() {
        return{
          "authorization": localStorage.getItem('mytoken') // 直接从本地获取token就行
        }
      }
    },
    methods: {
      handleAvatarSuccess(res, file) {
        console.log(res)
        console.log(file)
        this.imageUrl = URL.createObjectURL(file.raw);
        this.addForm.url = res.data.targetName
      },
      edithandleAvatarSuccess(res, file) {
        console.log(res)
        console.log(file)
        this.imageUrl = URL.createObjectURL(file.raw);
        this.editForm.url = res.data.targetName
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.pagesize = val
        this.initList()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`)
        this.pagenum = val
        this.initList()
      },
      initList() {
        this.loading = true
        console.log(1232)
        slidelist({
          params: {
            // title:this.title,
            page: this.pagenum-1,
            size : this.pagesize,
            // sortField: 'createTime',
            // sortType:'desc'
          }
        }).then(res => {
          console.log(res)
          this.newsList = res.data
          this.total = res.data.length
          this.loading = false
        })
        
      },
      // closeDiaglog(){
      //   this.$refs['addUserForm'].resetFields()
      // },
      // 添加用户
      addUserSubmit(formName) {
        console.log(12312)
         this.$refs[formName].validate(valide => {
          if (valide) {
            console.log(123213)
            console.log(this.addForm)
            addslide(this.addForm).then(res => {
              console.log(res)
              if (res.status === 0) {
                this.$message({
                  type: 'success',
                  message: '创建用户成功'
                })
              this.initList()
              } else {
                this.$message({
                  type: 'warning',
                  message: res.message
                })
              }
              this.addDialogFormVisible = false
            })
          }
        })
      },
      // 显示编辑用户对话框
      showEditDialog(row) {
        this.editDialogFormVisible= true
        this.editForm.slideshowId = row.slideshowId
        this.editForm.title = row.title
        this.editForm.url = row.url
        this.editForm.subscript = row.subscript
      },
      // 编辑用户提交
      editUserSubmit(formName) {
        this.$refs[formName].validate(valide => {
          if (valide) {
            console.log(this.editForm)
            editslide(this.editForm).then(res => {
              console.log(res)
              if (res.status === 0) {
                this.$message({
                  type: 'success',
                  message: '编辑成功'
                })
                this.editDialogFormVisible = false
                this.initList()
              } else {
                this.$message({
                  type: 'warning',
                  message: res.message
                })
              }
            })
          }
        })
      },
      // 显示删除对话框
      showDeleteDialog(row) {
        console.log(row)
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 执行删除用户操作
          deleteslide({
          params: {
            slideshowId:row.slideshowId
          }
        }).then(res => {
            if (res.status === 0) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.initList()
            } else {
              this.$message({
                type: 'warning',
                message: res.message
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
    }
  }

</script>
<style lang="scss" scoped>
  .user {
    .margin-20 {
      margin: 20px 0;
    }
    .el-form-item__content{
    width: 80%;
}
    .preview{
    min-height: 300px;
    width: 100%;
    }
    .search-input {
      width: 300px;
    }
    .page {
      padding: 5px 0;
      background-color: #D3DCE6;
    }
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

</style>
